<!-- /**
 * 这是一个Vue组件的模板部分，用于定义组件的结构和布局。
 * 在Vue文件中，<template>标签用于编写HTML模板代码。
 * 在Login.vue文件中，<template>标签定义了登录页面的布局和结构。
 */ -->

 <template> <!-- 这是Vue组件的模板部分，它包含了组件的HTML结构 -->
    <!-- 这是一个包含整个登录表单的容器 -->
    <div class="login-container"> 
      <!-- ref="loginForm" 这是一个引用（reference），可以用来在Vue组件中访问这个元素。 -->
      <!-- model="loginForm" 这是表单的数据模型，通常是一个包含表单所有字段值的对象。 -->
      <!-- rule="loginRules": 这是表单验证规则，用于定义每个字段的验证逻辑。 -->
      <el-form ref="loginForm" :model="loginForm" :rule="loginRules" class="login-form" auto-complete="on" label-position="lefr">
        <!-- 这是登录表单的标题。 -->
        <div class="titile-container">
          <h3 class="title">涤尘小筑管理系统</h3>
          <p class="subtitle" style="color: #FFFFFF;">欢迎入住涤尘小筑，如果您已拥有账户，则可点此<button class="login-button">登录</button>  ：</p>
        </div>
  
        <!-- 这是Element UI库中的表单项组件，用于包含一个表单字段。
          它的prop属性值应该与表单模型中的字段名相对应。 -->
        <el-form-item prop="username">
          <el-input
            ref="username"
            v-model="loginForm.username" 
            placeholder="用户名"
            name="username"
            type="text"
            tabindex="1"
            auto-compelete="on"
            prefix-icon="el-icon-user"
          />
          <!-- v-model="loginForm.username": 这是Vue的双向数据绑定语法，用于将输入框的值与表单模型中的username字段绑定。 -->
          <!-- tabindex属性用于指定元素在键盘导航时的顺序。 -->
          <!-- placeholder 是一个 HTML5 中新增的属性，主要用于描述输入字段预期值的简短的提示信息 -->
  
        </el-form-item>
  
        <el-form-item prop="password">
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="密码"
            name="password"
            tabindex="2"
            auto-compelete="on"
            @keyup.enter.native="handleLogin"
            prefix-icon="el-icon-help"
            show-password
          />
          <!-- @keyup.enter.native="handleLogin" 是 Vue.js 中的一个事件监听器。它的含义如下：
  
            @keyup.enter：这是一个键盘事件监听器，它会在用户按下并释放键盘上的 Enter 键时触发。
            .native：这是一个修饰符，它告诉 Vue.js 直接监听组件根元素的原生事件，而不是组件内部触发的自定义事件。
            "handleLogin"：这是一个方法名，当事件被触发时，这个方法会被调用。 -->
        </el-form-item>

        <!-- 确认密码 -->  
    <el-form-item prop="confirmPassword">  
      <el-input  
        v-model="loginForm.confirmPassword"  
        type="password"  
        placeholder="确认密码"  
        name="confirmPassword"  
        tabindex="3"  
        autocomplete="off"  
        prefix-icon="el-icon-lock"  
        show-password  
      />  
    </el-form-item>  
  
    <!-- 姓名 -->  
    <el-form-item prop="name">  
      <el-input  
        v-model="loginForm.name"  
        placeholder="姓名"  
        name="name"  
        tabindex="4"  
        autocomplete="on"  
        prefix-icon="el-icon-user"  
      />  
    </el-form-item>  
  
    <!-- 性别 -->  
    <el-form-item prop="gender" label="性别">  
      <el-radio-group v-model="loginForm.gender">  
        <el-radio label="男"></el-radio>  
        <el-radio label="女"></el-radio>  
      </el-radio-group>  
    </el-form-item>  
  
    <!-- 手机号 -->  
    <el-form-item prop="phone">  
      <el-input  
        v-model="loginForm.phone"  
        placeholder="手机号"  
        name="phone"  
        tabindex="5"  
        autocomplete="off"  
        prefix-icon="el-icon-phone"  
      />  
    </el-form-item>  


    
  
    <!-- 注册和重置按钮 -->  
    <el-form-item>  
      <el-button type="primary" @click="handleRegister" :loading="registerLoading">注册</el-button>  
      <el-button @click="handleReset">重置</el-button>  
    </el-form-item>  
      </el-form>
    </div>
  </template>
  
  
  <!-- /**
   * 这个 <script> 标签用于定义 Login.vue 组件的逻辑部分。
   * 在这里可以编写处理登录逻辑、验证用户输入等功能的代码。
   */ -->
  
  <script>
    import {Message} from 'element-ui'
    import Cookies from 'js-cookie'
    
    export default {
      name:'Login',
      data(){
        const validateUsername = (rule, value, callback) => {
          if(!value) {
            callback(new Error('请输入正确的用户名'))
          } else {
            callback()
          }
        }
        const validatePassword = (rule, value, callback) => {
          if(value.length > 6) {
            callback(new Error('密码不能少于6位'))
          } else {
            callback()
          }
        }
        return {
          loginForm: {
            username:'',
            password:''
          },
          loginRules: {
            username: [{required:true, trigger:'blur', validator:validateUsername}],
            password: [{required:true, trigger:'blur', validator:validatePassword}]
          },
          loading:false,
          passwordType:'password'
        }
      },
      methods: {
        // 它包含了 Vue 实例中所有的方法。
        handleLogin() {//方法，用于处理用户的登录操作。
          this.$refs.loginForm.validate(valid => {//调用了 loginForm 组件的 validate 方法来验证表单的输入。validate 方法接收一个回调函数作为参数，这个回调函数的参数 valid 是一个布尔值，表示验证是否通过。
  
            if (valid) {
              this.loading = true//开始加载。
              const data = {//这行代码创建了一个名为 data 的常量，它是一个对象，包含了用户名和密码。用户名使用了 trim 方法去除了前后的空格。
                username: this.loginForm.username.trim(), 
                password: this.loginForm.password 
              }
  
              //这行代码发送了一个 POST 请求到 'user/login' 路径，请求的数据是 data。然后，
              //它使用了 then 方法来处理服务器的响应。then 方法接收一个回调函数作为参数，这个回调函数的参数 res 是服务器的响应。
              this.$http.post('user/login', data).then(res => {
  
                //这行代码创建了一个名为 info 的常量，它是服务器响应的数据。
                const info = res.data
  
                if (info.code !== 20000) {
                  //这行代码调用了 Message 函数来显示一个消息。消息的内容是 info.message，如果 info.message 不存在，则显示 'Error'。消息的类型是 'error'，持续时间是 5 秒。
                  Message({
                    message: info.message || 'Error',
                    type: 'error',
                    duration: 5 * 1000
                  })
  
                  this.loading = false//表示加载结束。
                } else {
  
                  //这行代码创建了一个名为 token 的常量，它是服务器响应数据中的 token。
                  const token = info.data.token
                  //这行代码创建了一个名为 TokenKey 的常量，它的值是 'test_token'。
                  const TokenKey = 'test_token'
                  //这行代码调用了 Cookies.set 方法来设置一个 cookie。cookie 的键是 TokenKey，值是 token
                  Cookies.set(TokenKey,token)
  
                  // 这行代码调用了 $router.push 方法来导航到 /Home 路径。
                  this.$router.push('/Home')
                  this.loading = false//加载结束。
                }
                }).catch(() => {this.loading = false})
            } else {
                console.log('error submit!!')
                return false
              }
          })
        }
      }
    }
  </script>
  
  <!-- /**
   * 这个 <style> 标签用于定义 Login.vue 组件的样式。
   */ -->
  
  <style>
  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 35px 50px 10px;
    margin: 0 auto;
    overflow: hidden;
    background: #283443;
    border-radius: 8px;
    opacity: 0.9;
  }
  
  .el-form-item {
    bottom: px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
  
  .login-container {
    min-height: 100%;
    width: 100%;
    background-color: #2d3a4b;
    overflow: hidden;
    background-image: url('../assets/regeit.jpg');
    background-size: 100%;
    display: flex;
    align-items: center;
    height: 100vh;
  }
  
  .title-container {
    position: relative;
  }
  
  .title {
    font-size: 26px;
    color: #eee;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }

  .login-button {  
  background-color:#2d3a4b; 
  border: none; /* 无边框 */  
  color: rgb(229, 31, 31); /* 红色文字 */  
  padding: 10px 20px; /* 内边距 */  
  text-align: center; /* 文字居中 */  
  text-decoration: none; /* 无文本装饰 */  
  display: inline-block; /* 行内块级元素 */  
  font-size: 16px; /* 字体大小 */  
  margin: 4px 2px; /* 外边距 */  
  cursor: pointer; /* 鼠标悬停时变为手形图标 */  
}
  </style>
  